<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="充电桩类别">
      <el-radio-group v-model="form.chargePileType">
        <el-radio label="0">慢充</el-radio>
        <el-radio label="1">快充</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="默认充电金额"
      :precision="2"
      prop="chargeAmount">
      <el-input-number v-model="form.chargeAmount" :min="0" :step="10" :precision="2"></el-input-number>
      <span style="margin-left: 10px">元</span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    updateUserChargeConfig,
  } from "@/api/chargepile/chargeConfig";

  export default {
    props: {
      chargeConfig: {
        type: Object
      }
    },
    data() {
      return {
        form: {},
        // 表单校验
        rules: {
          chargeAmount: [
            {
              pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/,
              message: "请输入正确的默认金额",
              trigger: "blur"
            }
          ]
        }
      };
    },
    watch: {
      chargeConfig: {
        handler(chargeConfig) {
          if (chargeConfig) {
            this.form = { id: chargeConfig.id, userId: chargeConfig.userId, chargePileType: chargeConfig.chargePileType, chargeAmount: chargeConfig.chargeAmount};
          }
        },
        immediate: true
      }
    },
    methods: {
      submit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserChargeConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.chargeConfig.chargePileType = this.form.chargePileType;
              this.chargeConfig.chargeAmount = this.form.chargeAmount;
            });
          }
        });
      },
      close() {
        this.$tab.closePage();
      }
    }
  };
</script>
